<include file="public/layout" />
<script src="__PUBLIC__/js/jquery.event.drag.js" type="text/javascript"></script>
<script type="text/javascript" src="__PUBLIC__/static/js/perfect-scrollbar.min.js"></script>
<style>
    .waybill_design .item { background-color: #FEF5E6; width: 90px; height: 20px; padding: 1px 5px 4px 5px !important; border-color: #FFBEBC; border-style: solid; border-width: 1px 1px 1px 1px; cursor: move; position: absolute; left: 0; top: 0;}
    .waybill_design .item pre {
        height: 100%;
        float: left;
        padding: 0;
        margin: 0;
        border:0;
        cursor: move;
    }

    .waybill_design textarea {
        padding-left: 0px;
        margin: 0px;
        font-size: 12px;
        resize: none;
        outline: none;
        overflow: hidden;
        border: none;
    }

    .waybill_design .resize {
        height: 6px;
        width: 6px;
        position: absolute;
        bottom: 0px;
        right: 0px;
        overflow: hidden;
        cursor: nw-resize;
        background-color: #aaaaaa;
    }
    .waybill_design .selected {
        filter: alpha(opacity = 100);
        -moz-opacity: 1;
        opacity: 1;
        border: 1px solid #ff6600;
    }

</style>
<body style="background-color: #FFF; overflow: auto;">
<div id="toolTipLayer" style="position: absolute; z-index: 9999; display: none; visibility: visible; left: 95px; top: 573px;"></div>
<div id="append_parent"></div>
<div id="ajaxwaitid"></div>
<div class="page">
    <div class="fixed-bar">
        <div class="item-title"><a class="back" href="javascript:history.back();" title="返回列表"><i class="fa fa-arrow-circle-o-left"></i></a>
            <div class="subject">
                <h3>物流管理 - 添加物流</h3>
                <h5>网站系统物流索引和管理</h5>
            </div>
        </div>
    </div>
    <form class="form-horizontal" id="handleposition">
        <input type="hidden" name="shipping_id" value="{$shipping.shipping_id}">
        <input type="hidden" name="template_html" value="{$shipping.template_html}">
        <div class="ncap-form-default">
            <dl class="row">
                <dt class="tit">
                    <label for="shipping_name"><em>*</em>物流公司名字</label>
                </dt>
                <dd class="opt">
                    <input type="text" value="{$shipping.shipping_name}" id="shipping_name" name="shipping_name" class="input-txt">
                    <span class="err" id="err_shipping_name"></span>
                    <p class="notic">物流公司名字</p>
                </dd>
            </dl>
            <dl class="row">
                <dt class="tit">
                    <label for="shipping_code"><em>*</em>快递公司编码</label>
                </dt>
                <dd class="opt">
                    <input type="text" value="{$shipping.shipping_code}" id="shipping_code" name="shipping_code" class="input-txt">
                    <span class="err" id="err_shipping_code"></span>
                    <if condition="$express_switch eq 1">
                      <p class="notic">物流公司编码由拼音组成,不得含有英文以外的字符。<a href="http://blog.csdn.net/wyp584168/article/details/79196562" target="_blank" class="ncap-btn"><i class="fa fa-truck"></i>
                        	快递鸟编码参考</a></p>
                    <else />
                    <p class="notic">物流公司编码由拼音组成,不得含有英文以外的字符。<a href="http://www.ickd.cn/api/list.html" target="_blank" class="ncap-btn"><i class="fa fa-truck"></i>
                        	快递100编码参考</a></p>
                    </if>
                </dd>
            </dl>
            <dl class="row">
                <dt class="tit">
                    <label>简短描述</label>
                </dt>
                <dd class="opt">
                    <textarea placeholder="请输入简短描述" name="shipping_desc" class="tarea w700">{$shipping.shipping_desc}</textarea>
                    <span class="err" id="err_shipping_desc"></span>
                    <p class="notic">简短描述</p>
                </dd>
            </dl>

            <dl class="row">
                <dt class="tit">
                    <label>物流图片图标</label>
                </dt>
                <dd class="opt">
                    <div class="input-file-show">
                        <span class="show">
                            <a id="img_a" target="_blank" class="nyroModal" rel="gal" href="{$shipping.shipping_logo}">
                                <i id="img_i" class="fa fa-picture-o" onmouseover="layer.tips('<img src={$shipping.shipping_logo}>',this,{tips: [1, '#fff']});" onmouseout="layer.closeAll();"></i>
                            </a>
                        </span>
           	            <span class="type-file-box">
                            <input type="text" id="shipping_logo" name="shipping_logo" value="{$shipping.shipping_logo}" class="type-file-text">
                            <input type="button" name="button" value="选择上传..." class="type-file-button">
                            <input class="type-file-file" onClick="GetUploadify(1,'','shipping_logo','img_call_back')" size="30" title="点击前方预览图可查看大图，点击按钮选择文件并提交表单后上传生效">
                        </span>
                    </div>
                    <span class="err" id="err_shipping_logo"></span>
                    <p class="notic">物流图片图标，最佳显示尺寸为240*60像素</p>
                </dd>
            </dl>

            <dl class="row">
                <dt class="tit">
                    <label for="width">模板宽度</label>
                </dt>
                <dd class="opt">
                    <input type="text" name="template_width" value="{$shipping.template_width|default='840'}" id="width" class="w100">
                    <span class="err" id="err_template_width"></span>
                    <p class="notic">运单宽度，单位为毫米(mm)</p>
                </dd>
            </dl>
            <dl class="row">
                <dt class="tit">
                    <label>模板高度</label>
                </dt>
                <dd class="opt">
                    <input type="text" name="template_height" value="{$shipping.template_height|default='480'}" class="w100">
                    <span class="err" id="err_template_height"></span>
                    <p class="notic">运单高度度，单位为毫米(mm)</p>
                </dd>
            </dl>
            <dl class="row">
                <dt class="tit">
                    <label>偏移量X</label>
                </dt>
                <dd class="opt">
                    <input type="text" name="template_offset_x" value="{$shipping.template_offset_x|default='0'}" class="w100">
                    <span class="err" id="err_template_offset_x"></span>
                    <p class="notic">运单模板左偏移量，单位为毫米(mm)</p>
                </dd>
            </dl>
            <dl class="row">
                <dt class="tit">
                    <label>偏移量Y</label>
                </dt>
                <dd class="opt">
                    <input type="text" name="template_offset_y" value="{$shipping.template_offset_y|default='0'}" class="w100">
                    <span class="err" id="err_template_offset_y"></span>
                    <p class="notic">运单模板上偏移量，单位为毫米(mm)</p>
                </dd>
            </dl>
            <dl class="row">
                <dt class="tit">
                    <label><em>*</em>模板图片</label>
                </dt>
                <dd class="opt">
                    <div class="input-file-show">
                    <span class="show">
                        <a id="template_img_a" target="_blank" class="nyroModal" rel="gal" href="{$shipping.template_img}">
                           <i id="template_img_i" class="fa fa-picture-o" onmouseover="layer.tips('<img src={$shipping.template_img}>',this,{tips: [1, '#fff']});" onmouseout="layer.closeAll();"></i>
                        </a>
                    </span>
                    <span class="type-file-box">
                        <input id="template_img" name="template_img" value="{$shipping.template_img}" class="type-file-text" type="text">
                        <input name="button" id="button1" value="选择上传..." class="type-file-button" type="button">
                        <input class="type-file-file" onclick="GetUploadify(1,'','plugins','template_img_call_back')" size="30" title="点击前方预览图可查看大图，点击按钮选择文件并提交表单后上传生效">
                    </span>
                    </div>
                    <span class="err" id="err_template_img"></span>
                    <p class="notic">请上传扫描好的运单图片，图片尺寸必须与快递单实际尺寸相符</p>
                </dd>
            </dl>
            <dl class="row">
                <dt class="tit">选择打印项</dt>
                <dd class="opt">
                    <select class="form-control" id="tagOption">
                        <option value="">添加标签</option>
                        <option value="发货点-名称">发货点-名称</option>
                        <option value="发货点-联系人">发货点-联系人</option>
                        <option value="发货点-电话">发货点-电话</option>
                        <option value="发货点-省份">发货点-省份</option>
                        <option value="发货点-城市">发货点-城市</option>
                        <option value="发货点-区县">发货点-区县</option>
                        <option value="发货点-手机">发货点-手机</option>
                        <option value="发货点-详细地址">发货点-详细地址</option>
                        <option value="收件人-姓名">收件人-姓名</option>
                        <option value="收件人-手机">收件人-手机</option>
                        <option value="收件人-电话">收件人-电话</option>
                        <option value="收件人-省份">收件人-省份</option>
                        <option value="收件人-城市">收件人-城市</option>
                        <option value="收件人-区县">收件人-区县</option>
                        <option value="收件人-邮编">收件人-邮编</option>
                        <option value="收件人-详细地址">收件人-详细地址</option>
                        <option value="时间-年">时间-年</option>
                        <option value="时间-月">时间-月</option>
                        <option value="时间-日">时间-日</option>
                        <option value="时间-当前日期">时间-当前日期</option>
                        <option value="订单-订单号">订单-订单号</option>
                        <option value="订单-备注">订单-备注</option>
                        <option value="订单-配送费用">订单-配送费用</option>
                    </select>
                    <a id="deleteTag" class="ncap-btn"><i class="fa fa-trash-o"></i>删除标签</a>
                </dd>
            </dl>
            <dl class="row">
                <dt class="tit">打印项偏移校正</dt>
                <dd class="opt">
                    <div class="waybill_area" style="overflow: auto;position: relative; width: {$config.width|default='840'}px; height: {$config.height|default='480'}px;">
                        <div class="waybill_back" style="position: relative; width: {$shipping.template_width|default='840'}px; height: {$shipping.template_height|default='480'}px;"> <img id="tp-img" src="{$shipping.template_img}" style="width: {$config.width|default='840'}px; height: {$config.height|default='480'}px;" alt=""> </div>
                        <div class="waybill_design" style="position: absolute; left: {$shipping.template_offset_x|default='0'}px; top: {$shipping.template_offset_y|default='0'}px; width: {$shipping.template_width|default='840'}px; height: {$shipping.template_height|default='480'}px;">
                            {$shipping.template_html|htmlspecialchars_decode}
                    </div>
                    </div>
                </dd>
            </dl>

            <div class="bot" style="position: relative;z-index: 10"><a href="JavaScript:void(0);" onclick="verifyForm();" class="ncap-btn-big ncap-btn-green" id="submit">确认提交</a></div>
        </div>
    </form>
</div>
<script type="text/javascript">
    function img_call_back(fileurl_tmp)
    {
        $("#shipping_logo").val(fileurl_tmp);
        $("#img_a").attr('href', fileurl_tmp);
        $("#img_i").attr('onmouseover', "layer.tips('<img src="+fileurl_tmp+">',this,{tips: [1, '#fff']});");
    }

    function template_img_call_back(value) {
        $("#template_img").val(value);
        $("#template_img_a").attr('href', value);
        $("#template_img_i").attr('onmouseover', "layer.tips('<img src="+value+">',this,{tips: [1, '#fff']});");
        $(".waybill_design").css({
            background: "url(" + value + ") 0px 0px no-repeat"
        });
        $('#tp-img').hide();
    }

    $().ready(function () {
        var $tagOption = $("#tagOption");
        var $deleteTag = $("#deleteTag");
        var $container = $(".waybill_design");
        var $background = $("#template_img");
        var $width = $("#width");
        var $height = $("#height");
        var zIndex = 1;
        bind($container.find("div.item"));
        // 标签选项
        $tagOption.change(function () {
            var value = $(this).find("option:selected").val();
            if (value != "") {
                bind($('<div class="item"><pre>' + value + '<\/pre><div class="resize"><\/div><\/div>').appendTo($container));
            }
            return false;
        });

        // 绑定
        function bind($item) {
            $item.drag("start", function (ev, dd) {
                var $this = $(this);
                dd.width = $this.width();
                dd.height = $this.height();
                dd.limit = {
                    right: $container.innerWidth() - $this.outerWidth(),
                    bottom: $container.innerHeight() - $this.outerHeight()
                };
                dd.isResize = $(ev.target).hasClass("resize");
            }).drag(function (ev, dd) {
                var $this = $(this);
                if (dd.isResize) {
                    $this.css({
                        width: Math.max(20, Math.min(dd.width + dd.deltaX, $container.innerWidth() - $this.position().left) - 2),
                        height: Math.max(20, Math.min(dd.height + dd.deltaY, $container.innerHeight() - $this.position().top) - 2)
                    }).find("textarea").blur();
                } else {
                    $this.css({
                        top: Math.min(dd.limit.bottom, Math.max(0, dd.offsetY)),
                        left: Math.min(dd.limit.right, Math.max(0, dd.offsetX))
                    });
                }
            }, {relative: true}).mousedown(function () {
                $(this).css("z-index", zIndex++);
            }).click(function () {
                var $this = $(this);
                $container.find("div.item").not($this).removeClass("selected");
                $this.toggleClass("selected");
            }).dblclick(function () {
                var $this = $(this);
                if ($this.find("textarea").size() == 0) {
                    var $pre = $this.find("pre");
                    var value = $pre.hide().text($pre.html()).html();
                    $('<textarea>' + value + '<\/textarea>').replaceAll($pre).width($this.innerWidth() - 6).height($this.innerHeight() - 6).blur(function () {
                        var $this = $(this);
                        $this.replaceWith('<pre>' + $this.val() + '<\/pre>');
                    }).focus();
                }
            });
        }
        // 删除标签
        $deleteTag.click(function () {
            $container.find("div.selected").remove();
            return false;
        });
        $background.bind("input propertychange change", function () {
            $container.css({
                background: "url(/" + $background.val() + ") 0px 0px no-repeat"
            });
        });

        // 宽度
        $width.bind("input propertychange change", function () {
            $container.width($width.val());
        });

        // 高度
        $height.bind("input propertychange change", function () {
            $container.height($height.val());
        });
    });
    function verifyForm(){
        var template_html = $(".waybill_design").html();
        $("input[name='template_html']").val(template_html);
        $('span.err').hide();
        $.ajax({
            type: "POST",
            url: "{:U('Shipping/save')}",
            data: $('#handleposition').serialize(),
            async:false,
            dataType: "json",
            error: function () {
                layer.alert("服务器繁忙, 请联系管理员!");
            },
            success: function (data) {
                if (data.status == 1) {
                    layer.msg(data.msg,{icon: 1,time: 2000},function(){
                        location.href = "{:U('Shipping/index')}";
                    });
                } else {
                    $('#submit').attr('disabled',false);
                    $.each(data.result, function (index, item) {
                        $('span.err').show();
                        $('#err_'+index).text(item);
                    });
                    layer.msg(data.msg, {icon: 2,time: 3000});
                }
            }
        });
    }
</script>
</body>
</html>